<template>
    <el-card shadow="never">
        <div style="margin-bottom: 22px;">
            <el-button plain @click="onConfirmBtn?.openDialog()"
                style="background-color: var(--el-color-primary); color: #fff;">
                添加分组
            </el-button>
        </div>

        <el-table :data="groupData" style="width: 100%"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal' }">
            <el-table-column prop="id" label="ID" width="160px" />
            <el-table-column prop="address" label="分组" />
            <el-table-column label="操作" width="120px">
                <template #default="scoped">
                    <el-button link type="primary" size="small" @click="onConfirmBtn?.openDialog(scoped.row)">
                        修改
                    </el-button><span>|</span>
                    <el-button link type="primary" size="small" @click="onDelete(scoped.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="400" />
        </div>
        <GroupFrom @onAddBtn="onAddBtn" @onUpdatedBtn="onUpdatedBtn" ref="openDialog"></GroupFrom>
    </el-card>


</template>


<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import GroupFrom from './GroupFrom.vue';
const pageData = ref({
    currentPage: 1,
    pageSize: 10,
})

type UserItemType = { id?: number, address: string, data?: number };
const groupData = ref<UserItemType[]>([
    {
        id: 1,
        address: 'A类客户',
        data: 1,

    },
    {
        id: 2,
        address: 'A类客户',
        data: 2,

    },
    {
        id: 3,
        address: 'A类客户',
        data: 3,

    },
    {
        id: 4,
        address: 'A类客户',
        data: 4,

    },
    {
        id: 5,
        address: 'A类客户',
        data: 5,

    },
    {
        id: 6,
        address: 'A类客户',
        data: 6,

    },
    {
        id: 7,
        address: 'A类客户',
        data: 7,

    },
    {
        id: 8,
        address: 'A类客户',
        data: 8,

    },
    {
        id: 9,
        address: 'A类客户',
        data: 9,

    },

])
const onConfirmBtn: any = useTemplateRef('openDialog');

//添加
function onAddBtn(item: UserItemType) {
    groupData.value.push({
        id: Date.now(),
        data: Date.now(),
        ...item
    })
}

//修改
function onUpdatedBtn(item: UserItemType) {
    groupData.value = groupData.value.map(i => {
        if (i.id == item.id) {
            return { ...item };
        }
        return i;
    })
}

//删除
const onDelete = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除分组吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            groupData.value = groupData.value.filter(item => item.id != id);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {

        })
}






</script>

<style scoped></style>
